<!--
 * @Author: Haochen
 * @Date: 2021-12-07 15:51:52
 * @LastEditTime: 2021-12-13 16:19:20
 * @FilePath: \students-system\src\views\login\Login.vue
-->
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>用户登录</span>
    </div>
    <el-form :model="user" ref="form" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model.lazy="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model.lazy="user.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "admin",
        password: "123456",
      },
    };
  },
  methods: {
    async login() {
      const { data: loginInfo } = await this.$api.users.login(this.user);
      // localStorage.token = "wadwdjwij";
      // this.$router.push("/home");
      loginInfo.code = 1;
      if (loginInfo.code) {
        localStorage.token = loginInfo.token;
        this.$message({
          message: "登录成功",
          type: "success",
        });
        this.$router.push("/home");
      } else {
        this.$message.error("账号或密码错误，无法登录");
      }
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin: 100px auto;
}
</style>
